<template> 
	<view class="content" :class="isProp?'isMove':''">
		<!-- <view class="top">
			<view class="typeContent">
				<view class="change">选择兑换类型</view>
				<view class="cords" @tap="checkRecord">兑换记录</view>
			</view>
			<view class="currency">多多券</view>
		</view> -->
		<view class="text">
			兑换金额
			<view class="cords" @tap="checkRecord">兑换记录</view>
		</view>
		<view class="inputContent">
			<input placeholder="请输入兑换金额" placeholder-class="placeholder" v-model="amount" class="input" type="number" maxlength="8" @input="numberFixedDigit" />
			<image src="../../static/recharge/close.png" class="closeImg" @tap="close"></image>
		</view>
		<view class="balance">可兑换金额 {{walletInfo.balance}}</view>
		<view class="procss"></view>
		
		<!-- 兑换方式列表 -->
		<view class="typeList">
			<view style="display: flex;align-items: center;justify-content: space-between;width: 720rpx;">
				<view class="typeTitle">选择兑换方式</view>
				<!-- <view class="typeTitle" @tap="add">添加</view> -->
			</view>
			
			<!-- 兑换方式 -->
			<!-- <view class="typeContent" @tap="chooseType(1,list.alipay.id)" v-if="list.alipay.realName">
				<view class="typeTop">
					<view class="type">
						<image src="../../static/withdraw/zfb.png" class="icon"></image>
						支付宝
					</view>
					<image :src="isSelect==1?'../../static/withdraw/selectImg.png':'../../static/withdraw/noneSelect.png'" class="chooseImg"></image>
				</view>
				<view class="info">
					{{list.alipay.realName}}<span>{{list.alipay.alipayAccount}}</span>
				</view>
			</view> -->
			<view class="typeContent" v-if="list.bankCardNumber">
				<view class="typeTop">
					<view class="type">
						<image src="../../static/withdraw/yhk.png" class="icon"></image>
						银行卡
					</view>
					<image :src="paymentId == list.id?'../../static/withdraw/selectImg.png':'../../static/withdraw/noneSelect.png'" class="chooseImg"></image>
				</view>
				<view class="info">
					{{list.realName}}<span>{{list.bankCardNumber}}</span>
				</view>
			</view>
			
			<view class="noneContent"  v-else>
				<image src="../../static/withdraw/noneCard.png" class="noneImg"></image>
				<view class="tips">暂无兑换方式，赶紧去添加吧～</view>
				<view class="addType" @tap="add">添加兑换方式</view>
			</view>
		</view>
		
		<view class="submit" @tap="goRechargeType" v-if="list.bankCardNumber">兑换</view>
		<!-- 购买弹窗 -->
		<view class="prop" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">兑换</view>
				<view class="numTitle">兑换金额</view>
				<input placeholder="请输入兑换金额" class="input" placeholder-class="placeholder" maxlength="11" type="number" v-model="amount" />
				<view class="numTitle">交易密码</view>
				<input placeholder="请输入交易密码" class="input" placeholder-class="placeholder" password maxlength="11" type="number" v-model="payPassword" />
			  <!-- <view class="numTitle">手机号验证码</view>
			  <input placeholder="请输入您的手机号验证码" class="input" placeholder-class="placeholder" password maxlength="8" type="number" v-model="verifyCode"/>
			  <view class="codes" @tap="getCodes">{{text}}</view> -->
				<view class="sures" @tap="sure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { paymentList,withdrawApply,sendMsg,userBalance } from '../../api/api.js'
	export default {
		data() {
			return {
				// 手机号
				phone:'',
				// 是否展示购买弹窗
				isProp:false,
				text:'获取验证码',
				// 收款方式列表
				list:'',
				// 选择的收款方式 0为未选， 1为支付宝 2为银行卡
				isSelect:0,
				// 兑换金额
				amount:'',
				// 支付密码
				payPassword:'',
				// 验证码
				verifyCode:'',
				// 收款方式id
				paymentId:'',
				walletInfo:'',  // 钱包信息
			}
		},
		onShow() {
			this.phone = uni.getStorageSync('phone')
			// 获取收款方式列表
			this.getList()
			// 获取钱包信息
			this.getuserWalletInfo()
		},
		methods: {
			// 获取收款方式列表
			getList() {
				let data = {}
				paymentList(data).then( res=> {
					this.list = res.data.bankCard
					this.paymentId = res.data.bankCard.id
				})
			},
			// 获取钱包信息
			getuserWalletInfo() {
				let data = {}
				userBalance(data).then( res=> {
					this.walletInfo = res.data
				})
			},
			// 查看兑换记录
			checkRecord() {
				uni.navigateTo({
					url:'./moneyRecord'
				})
			},
			numberFixedDigit (e) { // 只能输入整数
			  e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
			  this.$nextTick(() => {
			    this.amount= e.target.value
			  })
			},
			// 清除兑换金额
			close() {
				this.amount = ''
			},
			// 添加收款方式
			add() {
				uni.navigateTo({
					url:'../set/addCard'
				})
			},
			// 选择收款方式
			chooseType() {
				this.paymentId = this.list.id
				// this.list.forEach( gitem => {
				// 	gitem.isSelect = false
				// 	if( item.id == gitem.id ) {
				// 		gitem.isSelect = true
				// 	}
				// })
				this.$forceUpdate()
			},
			//获取验证码
			getCodes(){
				if( this.text != '获取验证码' ) {
					return false
				}
				//判断手机号是否正确
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){ 
					let data = {
						phone:this.phone,
						type:5
					}
					sendMsg(data).then(res=> {
						if ( res.code == 200 ) {
							uni.showToast({
								icon:'none',
								title:'验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(()=>{
							  if(seconds > 0){
								  seconds -- ;
								  this.text = seconds + 's后重新获取'
							  }else{
								  this.text = '获取验证码';
								  clearInterval(interval)
							  }
							},1000)
						}
					})
			  }else{
				  uni.showToast({
					  icon:'none',
					  title:'请输入正确的手机号~'
				  })
			  }
			},
			// 打开弹窗
			goRechargeType() {
				if( !this.amount ) {
					uni.showToast({
						icon:'none',
						title:'请输入兑换金额'
					})
					return false
				}
				if( this.amount < this.list.withdrawMinAmount ) {
					uni.showToast({
						icon:'none',
						title:'最少兑换金额为' + this.list.withdrawMinAmount
					})
					return false
				}
				// debugger
				if( !this.paymentId ) {
					uni.showToast({
						icon:'none',
						title:'请选择兑换方式'
					})
					return false
				}
				this.isProp = true
				this.payPassword = ''
				this.verifyCode = ''
			},
			// 关闭弹窗
			closeProp() {
				this.isProp = false
			},
			// 提交
			sure() {
				if( !this.payPassword ){
					uni.showToast({
						icon:'none',
						title:'请输入支付密码'
					})
					return false
				}
				let data = {
					payPassword:this.payPassword,
					// verifyCode:this.verifyCode,
					amount:this.amount,
					paymentId:this.paymentId,
				}
				withdrawApply(data).then( res=> {
					uni.showToast({
						icon:'none',
						title:'兑换成功，请等待审核~'
					})
					this.isProp = false
					this.getuserWalletInfo()
				})
			}
		}
	}
</script>

<style lang="less">
	.isMove {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
	}
	.content {
		.top {
			padding: 30rpx 30rpx 0 30rpx;
			width: 690rpx;
			height: 160rpx;
			background-color: #FE3B33;
			.typeContent {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.change {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #A7CBFF;
					line-height: 42rpx;
				}
				.cords {
					text-align: center;
					width: 140rpx;
					height: 56rpx;
					border-radius: 8rpx;
					border: 1rpx solid #FFFFFF;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
				}
			}
			.currency {
				margin-top: 20rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;
			}
		}
		.text {
			width: 690rpx;
			justify-content: space-between;
			display: flex;
			align-items: center;
			margin: 36rpx 0 0 34rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 42rpx;
			.cords {
				text-align: center;
				width: 140rpx;
				height: 56rpx;
				border-radius: 8rpx;
				border: 1rpx solid #FE3B33;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FE3B33;
				line-height: 56rpx;
			}
		}
		.inputContent {
			position: relative;
			.icon {
				left: 30rpx;
				top: 15rpx;
				position: absolute;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.input {
				margin: 30rpx 0 0 30rpx;
				width: 690rpx;
				height: 70rpx;
				border-bottom: 1px solid #E5E5E5;
			}
			.closeImg {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				right: 30rpx;
				bottom: 23rpx;
			}
			.placeholder {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}
		.balance {
			margin: 16rpx 0 0 30rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #353535;
			line-height: 33rpx;
			span {
				font-weight: Medium;
			}
		}
		.procss {
			margin-top: 32rpx;
			width: 750rpx;
			height: 10rpx;
			background: #F5F5F5;
		}
		// 兑换方式列表
		.typeList {
			.typeTitle {
				margin: 40rpx 0 10rpx 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #353535;
				line-height: 40rpx;
			}
			.typeContent {
				margin-top: 40rpx;
				border-bottom: #F5F5F5 10rpx solid;
				padding-bottom: 31rpx;
				.typeTop {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.type {
						margin-left: 30rpx;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #353535;
						line-height: 40rpx;
						.icon {
							width: 38rpx;
							height: 38rpx;
							margin-right: 16rpx;
						}
					}
					.chooseImg {
						margin-right: 30rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.info {
					margin: 30rpx 0 0 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 40rpx;
					span {
						margin-left: 24rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #353535;
						line-height: 42rpx;
					}
				}
			}
			.noneContent {
				display: flex;
				align-items: center;
				flex-direction: column;
				.noneImg {
					margin-top: 132rpx;
					width: 320rpx;
					height: 291rpx;
				}
				.tips {
					margin-top: 36rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B8B8B8;
					line-height: 33rpx;
				}
				.addType {
					margin-top: 120rpx;
					text-align: center;
					line-height: 90rpx;
					width: 690rpx;
					height: 90rpx;
					background: #FE3B33;
					border-radius: 45rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.submit {
			margin: 200rpx 0 0 30rpx;
			text-align: center;
			line-height:90rpx ;
			width: 690rpx;
			height: 90rpx;
			background: #FE3B33;
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.prop {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(26, 26, 26, 0.45);
			.buyProp {
				padding-bottom: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.closeImg {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: 37rpx;
					right: 25rpx;
				}
				
				.title {
					margin-top: 38rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.numTitle {
					margin-top: 46rpx;
					width: 470rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}
				.input {
					margin-top: 12rpx;
					height: 88rpx;
					width: 470rpx;
					border-bottom:1rpx solid #F2F2F2 ;
				}
				.placeholder {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}
				.sures {
					margin-top: 60rpx;
					text-align: center;
					line-height: 86rpx;
					width: 470rpx;
					height: 86rpx;
					background: #FE3B33;
					border-radius: 45rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.codes {
					position: absolute;
					right: 43rpx;
					bottom: 210rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					line-height: 33rpx;
				}
			}
		}
	}
</style>
